<div id="gameContainer1"></div>
<!-- Declare a JsRender template, in a script block:
-->
<script id="gameTmpl" type="text/x-jsrender">
      <div class="col-item">
    {{for}}
      <div class="hd" style="background-color: rgb(67, 118, 173)">
          {{:name}}
      </div>
      <div class="desc line-2">
        {{:name}} games
      </div>
      <div class="bd">
          {{for list}}
        <div class="item">
          <a href="game.html?id={{:Id}}">
            {{if #index < 4}}
            <i class="hot-effect"><span>Hot</span></i>
            {{/if}}
            <span class="mark"></span>
            <img
              data-src="{{:cover}}"
              src="{{:cover}}"
              lazy="loaded"
          /></a>
        </div>
        {{/for}}
      </div>
    {{/for}}
  </div>
</script>

<script>
  $.ajax({
    url: "https://app.nocodb.com/api/v2/tables/mg01furv08tboqh/records?viewId=vwkcjs6aeek51qs1&limit=200&shuffle=1&offset=0",
    type: "GET",
    dataType: "json",
    headers: {
      "xc-token": "dePwLQ88UMbt4O9ndpBSQ-6RUC_nIhhpPea_0kTR",
    },
    contentType: "application/json; charset=utf-8",
    success: function (gameData) {
      // item Template
      let gameTmpl = $.templates("#gameTmpl");
      let gameList = {},
        list = [];

      gameData.list.map(item => {
        gameList[item.tag] = gameList[item.tag]
          ? [...gameList[item.tag], item]
          : [item];
      });

      list = Object.entries(gameList).map(([key, value]) => ({
        name: key,
        list: value,
      }));
      console.log(list);
      let gameHtml = gameTmpl.render(list);
      $("#gameContainer1").html(gameHtml);
    },
    error: function (error) {
      console.error(error);
    },
  });
</script>
